<script setup>
import { inject, onMounted, ref } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import { getHelper } from '@/utils/map/index.js'
import noSel from '../../../../assets/imgs/area_list_nor.png'
import sel from '../../../../assets/imgs/area_list_sel.png'
import { useSide } from '@/store/side.js'
import { getKeyAreaList } from '@/api/manager/dataManage/keyAreaManage.js'
import { ElMessage } from 'element-plus'

let measure, _viewer, _layerManager

const mapId = inject('mapId')

const expandItem = ref('')

const sideStore = useSide()

const areaList = ref([
  {
    name: 'A号楼',
    id: '1775146705301917697',
  },
  {
    name: 'B号楼',
    id: '1779426589046517761',
  },
  {
    name: 'C号楼',
    id: 'c',
  },
  {
    name: 'D号楼',
    id: 'd',
  },
])

const areaNums = ref('')

const getTableDataList = () => {
  getKeyAreaList({
    pageSize: 999,
    parkId: props.activePark,
  }).then((res) => {
    if (res.success) {
      // console.log(res.data)
      areaList.value = res.data?.list?.map((item) => {
        return {
          name: item.name,
          id: item.pkid,
          parkId: item.parkId,
        }
      })

      const len = areaList.value.length
      if (len) {
        handleChangeExpandItem(areaList.value[0].id)
      }
      areaNums.value = len.toString().padStart(3, '0')
    } else {
      ElMessage.error(res.message)
    }
  })
}

const props = defineProps({
  isExpanded: Boolean,
  activePark: String,
})

onMounted(async () => {
  const { map, layerManager } = await getHelper(mapId)
  _viewer = map
  measure = new Cesium.Measure(map)
  _layerManager = layerManager
  expandItem.value = areaList.value[0]?.id || ''
  sideStore.setAreaPkid(expandItem.value)
  getTableDataList()
})

const handleChangeExpandItem = (id) => {
  expandItem.value = expandItem.value === id ? '' : id
  sideStore.setAreaPkid(expandItem.value)
}
</script>
<template>
  <div :class="['left', isExpanded ? 'active' : '']">
    <card name="重点区域防控" class="keynote-area">
      <template #title>
        <i class="title-icon"></i>
      </template>
      <div class="keynote-area-title">
        <div class="name">重点区域</div>
        <div class="right-nums">
          <!-- <div class="right-num">0</div>
          <div class="right-num">6</div>
          <div class="right-num">4</div> -->
          <div v-for="item in areaNums">
            <div class="right-num">{{ item }}</div>
          </div>
          <span>个</span>
        </div>
      </div>
      <div class="keynote-area-list">
        <el-scrollbar>
          <div
            class="keynote-area-list-item"
            v-for="(item, index) in areaList"
            :key="index"
          >
            <div
              class="keynote-area-list-item-top"
              :style="{
                backgroundImage:
                  expandItem === item.id ? `url(${sel})` : `url(${noSel}`,
              }"
              @click="handleChangeExpandItem(item.id)"
            >
              <span>{{ item.name }}</span>
              <img
                src="../../../../assets/imgs/ic_sq.png"
                v-if="expandItem !== item.id"
              />
              <img src="../../../../assets/imgs/ic_xl_zk.png" v-else />
            </div>
          </div>
        </el-scrollbar>
      </div>
    </card>
  </div>
</template>
<style scoped lang="scss">
.left {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .keynote-area {
    height: 976px;

    .title-icon {
      width: 162px;
      background-image: url('@/assets/imgs/zdqyfk_title.png');
    }

    &-title {
      height: 95px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url('@/assets/imgs/img_zdqy_bg.png');
      padding-left: 113px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 30px;

      .name {
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
        background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .right-nums {
        display: flex;

        .right-num {
          width: 30px;
          height: 40px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-image: url('@/assets/imgs/img_sz_area.png');
          font-family: DINPro;
          font-weight: 500;
          font-size: 23px;
          color: #fff3e1;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 6px;
        }

        span {
          font-family: Source Han Sans SC;
          font-weight: 500;
          font-size: 12px;
          color: #c4eaff;
          margin-top: 18px;
        }
      }
    }

    &-list {
      margin-top: 20px;
      height: calc(100% - 120px);
      overflow: hidden;

      &-item {
        margin-bottom: 20px;
        &-top {
          height: 40px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-left: 20px;
          padding-right: 20px;
          cursor: pointer;

          img {
            height: 32px;
            width: 32px;
          }
        }

        &-content {
          display: flex;
          flex-wrap: wrap;
          height: 268px;
          justify-content: space-between;
          padding-top: 10px;

          &-img {
            width: 49%;
            height: 47%;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: relative;

            .name {
              width: 100%;
              height: 24px;
              display: flex;
              align-items: center;
              background: rgba($color: #001d31, $alpha: 0.8);
              font-family: Source Han Sans SC;
              font-weight: 500;
              font-size: 12px;
              color: #ffffff;
              position: absolute;
              bottom: 0;

              .point {
                width: 7px;
                height: 7px;
                background: #21df95;
                border-radius: 50%;
                margin-left: 6px;
                margin-right: 6px;
              }
            }

            .warn-black {
              height: 100%;
              width: 100%;
              position: absolute;
              top: 0;
              left: 0;
              background: rgba($color: #000000, $alpha: 0.45);
            }

            .warn-img {
              height: 64px;
              width: 64px;
              position: absolute;
              top: 13px;
              left: calc(50% - 32px);
              z-index: 1000;
            }

            .warn {
              width: 114px;
              height: 26px;
              position: absolute;
              top: 71px;
              left: calc(50% - 57px);
              z-index: 1000;
            }
          }
        }
      }
    }
  }
}
</style>
